<html lang="cn">

<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="陶士涵">
    <title>聊天界面</title>
    <link rel="stylesheet" href="/static/css/common.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
    <script src="/static/js/functions.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js"></script>
    <style>
        html,
        body {
            overflow: hidden;
            height: 100%;
            padding: 0;
            margin: 0;
            background-color: #f5f5f5;
        }

        .el-row {
            width: 100%
        }

        .chatBg {
            min-height: 100%;
            background: #fff;
            border: solid 1px #e6e6e6;
            overflow: hidden;
        }

        .chatLeft {
            margin-left: 4px;
        }

        .sw-bg {
            background: #fff;
            border: solid 1px #e6e6e6;
            boder-top: none;
            padding: 5px 10px;
        }

        .chatBgContext .el-row {
            margin-bottom: 5px;
        }

        .chatBgContext {
            position: relative;
        }

        .chatUser {
            line-height: 24px;
            font-size: 12px;
            white-space: nowrap;
            color: #999;
        }

        .chatContent {
            text-align: left;
            background-color: rgb(166, 212, 242);
            color: #000;
            border: 1px solid rgb(152, 199, 230);
            padding: 8px 15px;
            min-height: 26px;
            word-break: break-all;
            position: relative;
            border-radius: 5px;
            display: inline-block;
        }

        .chatContent:after {
            content: '';
            position: absolute;
            left: -10px;
            top: 13px;
            width: 0;
            height: 0;
            border-style: dashed;
            border-color: transparent;
            overflow: hidden;
            border-width: 10px;
            border-top-style: solid;
            border-top-color: rgb(166, 212, 242);
        }

        .chatBoxMe .chatContent {
            float: right;
            background-color: rgb(152, 225, 101);
            border: 1px solid rgb(145, 215, 96);
        }

        .chatBoxMe .chatContent:after {
            border-top-color: rgb(152, 225, 101);
        }

        .chatBoxMe .el-col-3 {
            float: right;
            text-align: right;
        }

        .chatBoxMe .chatUser {
            text-align: right
        }

        .chatBoxMe .chatContent:after {
            left: auto;
            right: -10px;
        }

        .chatArea {
            margin: 10px 0;
        }

        .chatBox {
            max-height: 350px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .chatTime {
            text-align: center;
            color: #bbb;
            margin: 5px 0;
            font-size: 12px;
        }

        .funcBtns {
            margin: 2px 0px;
            color: #7f7f7f;
            border-bottom: 1px solid #e6e6e6;
            font-size: 12px;
            padding: 5px 0px;
        }
    </style>
</head>

<body>
    <div id="app">
        <template>
            <el-row :gutter="2">
                <el-col :span="6">
                    <div class="chatBg chatLeft">
                        <el-tabs v-model="leftTabActive" @tab-click="handleTabClick">
                            <el-tab-pane label="在线用户" name="first">
                                <el-row v-for="item in users" :key="item.uid" class="">
                                    <div :title="item.last_message" style="cursor:pointer"
                                        class="onlineUsers hasLastMsg" v-bind:class="{'cur': item.uid==currentGuest }"
                                        v-on:click="talkTo(item.uid,item.username)">
                                        <el-col :span="4">
                                            <el-avatar :size="40" :src="item.avator"></el-avatar>
                                        </el-col>
                                        <el-col :span="16">
                                            <div>
                                                <{item.username}>
                                            </div>
                                            <div class="lastNewMsg">
                                                <{item.last_message}>
                                            </div>
                                        </el-col>
                                    </div>
                                </el-row>
                            </el-tab-pane>
                            <el-tab-pane label="已接访客" name="second">
                                <el-row v-for="item in visitors" :key="item.uid" class="">
                                    <div style="cursor:pointer" class="onlineUsers"
                                        v-bind:class="{'cur': item.visitor_id==currentGuest }"
                                        v-on:click="talkTo(item.visitor_id,item.name)">
                                        <el-col :span="4">
                                            <el-avatar v-bind:class="{'imgGray': item.status==0 }" :size="40"
                                                :src="item.avator"></el-avatar>
                                        </el-col>
                                        <el-col :span="16" v-bind:class="{'imgGray': item.status==0 }">
                                            <{item.name}>
                                        </el-col>
                                    </div>
                                </el-row>
                                <el-pagination background @current-change="visitorPage"
                                    :current-page="visitorCurrentPage" layout="prev,pager, next"
                                    :page-size="visitorPageSize" :total="visitorCount">
                                </el-pagination>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="sw-bg chatBgContext">
                        <el-alert :closable="false" :type="chatTitleType" show-icon :title="chatTitle">
                        </el-alert>
                        <div class="funcBtns" v-show="visitor.visitor_id">
                            <el-button v-on:click="transKefu" size="small" type="success" plain icon="el-icon-position">
                                转接</el-button>
                            <el-button v-on:click="closeVisitor(visitor.visitor_id)" size="small" type="success" plain
                                icon="el-icon-close">结束</el-button>
                        </div>
                        <div class="chatBox">
                            <el-row :gutter="2" v-for="v in msgList" v-bind:class="{'chatBoxMe': v.is_kefu==true}">
                                <div class="chatTime">
                                    <{v.time}>
                                </div>
                                <el-col :span="3">
                                    <el-avatar :size="60" :src="v.avator"></el-avatar>
                                </el-col>
                                <el-col :span="21">
                                    <div class="chatUser">
                                        <{v.name}>
                                    </div>
                                    <div class="chatContent" v-html="v.content"></div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="faceBox kefuFaceBox">
                            <ul class="faceBoxList">
                                <li v-on:click="faceIconClick(i)" class="faceIcon" v-for="(v,i) in face"
                                    :title="v.name"><img :src=v.path></li>
                            </ul>
                            <div class="clear"></div>
                        </div>
                        <el-input type="textarea" class="chatArea" v-model="messageContent"
                            v-on:keyup.enter.native="chatToUser"></el-input>
                        <div class="faceBtn"></div>
                        <div class="imageBtn" id="uploadImg" v-on:click="uploadImg('/uploadimg')"></div>
                        <el-button class="floatRight" type="primary" v-on:click="chatToUser">发送</el-button>
                        <div class="clear"></div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="chatBg chatRight">
                        <el-tabs v-model="rightTabActive" @tab-click="handleTabClick">
                            <el-tab-pane label="访客信息" name="visitorInfo">
                                <el-menu>
                                    <el-tooltip content="点击加入黑名单" placement="left">
                                        <el-menu-item v-on:click="addIpblack(visitor.source_ip)" title="点击加入黑名单"
                                            style="padding-left:2px;">
                                            <i class="el-icon-s-tools"></i>
                                            <span slot="title">ClientIP：<{visitor.source_ip}></span>
                                        </el-menu-item>
                                    </el-tooltip>
                                    <el-tooltip content="点击加入黑名单" placement="left">
                                        <el-menu-item v-on:click="addIpblack(visitor.client_ip)" title="点击加入黑名单"
                                            style="padding-left:2px;">
                                            <i class="el-icon-s-tools"></i>
                                            <span slot="title">IP：<{visitor.client_ip}></span>
                                        </el-menu-item>
                                    </el-tooltip>
                                    <el-menu-item v-on:click="openUrl('https://www.baidu.com/s?wd='+visitor.client_ip)"
                                        style="padding-left:2px;">
                                        <i class="el-icon-s-tools"></i>
                                        <span slot="title">城市：<{visitor.city}></span>
                                    </el-menu-item>
                                    <el-popover ref="popover" placement="top" title="来源" width="300" trigger="hover"
                                        :content="visitor.refer">
                                    </el-popover>
                                    <el-menu-item v-popover:popover style="padding-left:2px;">
                                        <i class="el-icon-s-tools"></i>
                                        <span slot="title">来源：<{visitor.refer}></span>
                                    </el-menu-item>
                                    <el-menu-item style="padding-left:2px;">
                                        <i class="el-icon-s-tools"></i>
                                        <span slot="title">创建时间：<{visitor.created_at}></span>
                                    </el-menu-item>
                                    <el-menu-item style="padding-left:2px;">
                                        <i class="el-icon-s-tools"></i>
                                        <span slot="title">访问时间：<{visitor.updated_at}></span>
                                    </el-menu-item>
                                    <el-tooltip content="点击关闭连接" placement="left">
                                        <el-menu-item v-on:click="closeVisitor(visitor.visitor_id)"
                                            style="padding-left:2px;">
                                            <i class="el-icon-s-tools"></i>
                                            <span slot="title">状态：<{visitor.status}></span>
                                        </el-menu-item>
                                    </el-tooltip>
                                </el-menu>
                            </el-tab-pane>
                            <el-tab-pane label="黑名单" name="blackList">
                                <el-row v-for="item in visitors" :key="item.uid" class="">
                                    <div style="cursor:pointer" class="onlineUsers imgGray">
                                        待开发
                                    </div>
                                </el-row>
                            </el-tab-pane>
                        </el-tabs>
                        <div class="chatRightTitle">快捷回复</div>
                        <div class="replyBox">
                            <el-collapse>
                                <el-collapse-item title="客服营销" name="1">
                                    <div class="replyItem">与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
                                    <div class="replyItem">在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
                                </el-collapse-item>
                                <el-collapse-item title="通用话术" name="2">
                                    <div class="replyItem">控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                                    <div class="replyItem">页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <!--图片放大-->
            <div id="bigPic" class="bigPic">
                <img src="/static/images/3.jpg" />
            </div>
            <!--//图片放大-->
            <audio id="chatMessageAudio">
                <source id="chatMessageAudioSource" src="/static/images/alert2.ogg" type="audio/mpeg" />
            </audio>
            <audio id="chatMessageSendAudio">
                <source id="chatMessageSendAudioSource" src="/static/images/sent.ogg" type="audio/mpeg" />
            </audio>
            <!--转接-->
            <el-dialog title="转移客服" :visible.sync="transKefuDialog" width="30%" top="0">
                <el-table :data="otherKefus" style="width: 100%">
                    <el-table-column prop="nickname" label="客服">
                    </el-table-column>
                    <el-table-column prop="status" label="操作">
                        <template slot-scope="scope">
                            <el-tag v-show="scope.row.status=='offline'" disable-transitions>离线</el-tag>
                            <el-button v-show="scope.row.status=='online'" type="primary"
                                @click="transKefuVisitor(scope.row.name,visitor.visitor_id)">转移</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="transKefuDialog = false">取 消</el-button>
                </span>
            </el-dialog>
            <!--//转接-->
        </template>
    </div>
</body>
<script src="/static/js/chat-main.js?v=0.3.5"></script>

</html>